<template>
  <!-- 短视频页面 -->
 <div class="short-video-detail">
     <headerCom></headerCom>
     	<div class="video-box">
			<!--<video poster="none" ref="videoref" src="https://saas-zgyh.oss-cn-shenzhen.aliyuncs.com/record/saas/1409/2020-04-23-19-59-15_2020-04-23-20-34-06.mp4" x5-video-player-fullscreen="true" x5-playsinline webkit-playsinline webkit-playsinline="" playsinline="" controls="controls" width="100%" style="object-fit: fill;">-->
			<video controlslist="nodownload" poster="none" ref="videoref" :src="videoInfo.video" x5-video-player-fullscreen="true" x5-video-player-type='h5-page' webkit-playsinline webkit-playsinline="" playsinline="" width="100%" style="object-fit: fill;">
				<span>您的手机版本，网页版暂未能支持！</span>
			</video>
		</div>
    <div class="bg-box" v-if="videoCoverImgIs">
        <img :src="videoInfo.imgUrl" alt="">
        <i @click="clickVideoPlay"></i>
    </div>
    <ul class="right-box">
          <li class="like">
            <i :class="isLike ?'active':''" @click="zan"></i>
            <span>{{videoInfo.goods}}</span>
          </li>
          <li class="comment">
            <i @click="comment"></i>
            <span>{{videoInfo.pls}}</span>
          </li>
          <li class="share" @click="showInvite">
            <i></i>
            <span>分享</span>
          </li>
    </ul>
    <div class="bottom-box">
      <p class="name">@{{videoInfo.nick}}</p>
      <p class="content">{{videoInfo.title}}</p>
      <div class="msg-box">
        <input type="text" v-model="message" placeholder="发布您的想法吧～">
        <span @click.stop="sendMsg">发送</span>
      </div>
    </div>
    <!-- <CommentSheet :show="false"></CommentSheet> -->
    <!-- 评论弹窗 -->
    <LeaveAMessage :class="[LeaveAMessageClass]" v-if="isShow" :cmtAutoCheck='cmtAutoCheck' :commentNum='videoInfo.pls' @slideDown="closeSlide"></LeaveAMessage>
    <!-- 分享 -->
    <div class="invite-card-box" v-if="isInviteBox" @click.stop.prevent="wrapBox($event)">
			<div class="connect-box" ref="connectBox">
				<div class="img-connect">
					<img :class="isLike?'img-poster-like':'img-poster'" :src="videoInfo.imgUrl+'?'+videoInfo.imgFbl" />
					<div class="btn-play"></div>
				</div>
				<div class="invite-title">
					{{videoInfo.title}}
				</div>
				<div class="line"></div>
				<div class="QRcode-box">
					<div class="qr-box">
                    <img :src="qrCodeUrl"/>
					</div>
					<div class="qr-box-tip">
						<div class="sm-p">
							<p>扫描二维码</p>
						</div>
						<p>进入中银运动直播间</p>
						<img src="../assets/images/zhxyk/card-logo.png" />
					</div>
				</div>
				<p class="footer-tip">截图保存至相册 邀请好友来观看</p>
			</div>
		</div>
 </div>
</template>

<script>
require('jr-qrcode');
import HeaderCom from './components/headerCom' //头部标题组件
import CommentSheet from './components/commentSheet' //留言组件
import LeaveAMessage from './components/leaveAMessage.vue';
  export default {
     components:{
       HeaderCom,
       CommentSheet,
       LeaveAMessage
     },

    data() {
      return {
        videoCoverImgIs: true,
        isLike:false,
        videoInfo:{},//视频信息
        cmtAutoCheck: '', //留言需要不需要审核    true 是不需要审核  false 是要审核
        message: '', //输入框消息
        isInviteBox:false,//二维码显示
        qrCodeUrl:"",//二维码地址
        isShow: false,//评论弹窗
      };
    },
    computed: {

    },
    created() {
      this.$store.dispatch("hideNav");
			this.getVideoInfo(); //视频信息
      this.dotNum('shortVideoPlay_page_'+this.$route.query.id,12);
      this.isZan();
      if(this.$channel=='zhxyk'){
         fun.componentCreated({channle:'zhxyk',isFirstPage:'-1'});//isFirstPage  1-跳转首页，0-返回上页，-1:隐藏公用标题，使用三方页面标题，closePage：关闭当前页面
      }
    },
    destroyed() { //组件销毁时候调用
        fun.componentCreated({channle:'zhxyk',isFirstPage:'1'});//isFirstPage  1-跳转首页，0-返回上页，-1:隐藏公用标题，使用三方页面标题，closePage：关闭当前页面
    },
    mounted() {},
    methods: {
      	wrapBox(e){//关闭
				let _this =this
        var connectBox = _this.$refs.connectBox;
				if(connectBox.contains(e.target)){//里面
				}else{//外面
					this.isInviteBox = false;
				}
		 },
      //生成二维码
			bulidQRcode(){
			    let url =  window.location.protocol + "//" + window.location.host + "/#/" + this.$channel + "/shortVideoDetail/" + "?id=" + this.$route.query.id		
				let imgBase64 = jrQrcode.getQrBase64(url, {
		          correctLevel: QRErrorCorrectLevel.L,
		        });
				this.qrCodeUrl = imgBase64; //这里是图片url
			},
      showInvite(){
			  	this.bulidQRcode()
				  this.isInviteBox = true;
			},
       sendMsg() {
				 //发送留言
				if(this.message.length == '0') {
					return
				}
				if(this.message.length > 140) {
					fun.toastMessage('已超出最大字数限制', 1500);
					return;
				}
				let params = {
					'acct': this.$store.state.userInfo.un,
					'msg': this.message,
					'nick': this.$store.state.userInfo.nickname,
					'vid': this.$route.query.id,
					'type':'1'
				}
				// /svideo/addSvComment 原来接口
				this.$http.post('/svideo/addVideoComment', JSON.stringify(params), {
					headers: {
						"Content-Type": "application/json"
					}
				}).then(
					res => {
						if(res.data.code == "000000") {
							if(this.cmtAutoCheck) { //true 是不需要审核

							} else { //需要审核
								fun.toastMessage('您的评论正在审核中，请耐心等待...', 1500)
							}

						}
					},
					err => {
						console.log("接口错误")
					}
				)
				this.message = ''
			},
      getVideoInfo() { //获取视频播放信息
				this.$http.get("/svideo/getShortVideo?id=" + this.$route.query.id)
					.then(res => {
            let {code,data} = res.data
            if(code == '000000'){
                this.videoInfo = data;
                this.cmtAutoCheck = data.cmtAutoCheck;
            }else {}
					})
					.catch(response => {
						console.log(response);
					});
			},
      clickVideoPlay() {
				this.videoCoverImgIs = false;
				this.$refs.videoref.play();
			},
      // 点赞
      zan(){
				this.$http.get("/svideo/svGoods?id=" + this.$route.query.id)
					.then(res => {
						if(res.data.code === '000000') {
							if(res.data.data) { //防止后端给null
							    this.isLike = true,
								this.videoInfo.goods++;

							}
						} else if(res.data.code === '100025') {
								fun.toastMessage('已点赞', 1500);
						}
					})
					.catch(response => {
						console.log(response);
					});
      },
      // 是否点赞
      isZan(){
				this.$http.get("/h5live/channel/shortVideo/hadSvGoods?shortVideoId=" + this.$route.query.id)
					.then(res => {
            let {data,code} = res.data
						if(code === '000000') {
              this.isLike = data
              }

					})
					.catch(response => {
						console.log(response);
					});
      },
      dotNum(type,streamType) { //统计
				let _this = this;
				var argumentData = {
					sessionId: type, //场次id
					streamType: streamType, //视频类型：1-预告 2-直播 3-回看 10-全局统计 11-商品点击 12-页面
					actionValue: 1, //行为：1-进入 2-离开 3-点击播放 4-留言 5-点赞 6-关注 7-分享 8-开播 9-关播 10-最高峰值
					playSource: fun.getPlatform(), //微信 app
					url: window.location.href, //当前的url
				};
				_this.$http.post("/h5live/recordData", argumentData, {
						headers: {
							"Content-Type": "application/json"
						}
					})
					.then(
						res => {
						},
						err => {
							console.log(err);
						}
					);
			},
      // 评论弹窗
      comment(){
         this.isShow = true;
				this.LeaveAMessageClass = 'showSlide';
      },
      closeSlide(data) {
        console.log(data,'data')
				switch(data.type) {
					case 'slideDown':
						this.LeaveAMessageClass = 'hideSlide'
            this.isShow = false;
						break;
					default:
						break;
				}
			},

    },
    watch: {},
  };
</script>
<style scoped="scoped">

 .short-video-detail{
   height: 100vh;
   width: 100vw;
   overflow-y: hidden;
 }
 .bg-box{
   height: 100vh;
   width: 100vw;
   position: absolute;
   top: 0;
   bottom: 0;
 }
 .bg-box i{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
   height: 115px;
   width: 114px;
   background: url('../assets/images/zhxyk/home/stop.png') no-repeat;
   background-size: 100% 100%;
 }
 .bg-box img{
   height: 100%;
   width: 100%;
 }
 .short-video-detail /deep/ .header-com{
   position: absolute;
   top: 28px;
   height: auto;
   padding-left:34px;
   border: none;

 }
 .short-video-detail /deep/ .iconfont{
  color: rgba(51, 51, 51, 1);
  z-index: 2;
 }
 .right-box{
   position: absolute;
   z-index: 2;
   right: 20px;
   bottom: 300px;
 }
 .right-box li{
   margin-bottom: 52px;
 }
 .right-box li span{
   font-size: 28px;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 40px;
	text-shadow: 0px 2px 4px #D6D6D6;
 }
 .like,.comment,.share{
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 .like i{
   height: 64px;
   width: 64px;
   background: url('../assets/images/zhxyk/home/like.png') no-repeat;
   background-size: 100% 100%;
 }
  .like i.active{
   height: 64px;
   width: 64px;
   background: url('../assets/images/zhxyk/home/like_active.png') no-repeat;
   background-size: 100% 100%;
 }
 .comment i{
   height: 64px;
   width: 64px;
   background: url('../assets/images/zhxyk/home/comment.png') no-repeat;
   background-size: 100% 100%;
 }
  .share i{
   height: 64px;
   width: 64px;
   background: url('../assets/images/zhxyk/home/share.png') no-repeat;
   background-size: 100% 100%;
 }
 .bottom-box{
   width: 100%;
   position: absolute;
   bottom: 0;
   padding: 0 30px;
   /* background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%); */
 }
 .bottom-box .name{
   margin-bottom: 10px;
   font-size: 32px;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 45px;
 }
 .bottom-box .content{
   margin-bottom: 10px;
   font-size: 30px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 42px;
  display: -webkit-box;
  -webkit-line-clamp:2;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
 }
 .msg-box{
   display: flex;
   align-items: center;
   height: 76px;
   margin-bottom: 42px;
 }
 .msg-box span{
   width: 103px;
   height: 100%;
    background: rgba(236, 236, 236, 0.8);
   text-align: center;
   line-height: 76px;
   font-size: 28px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
    border-left: 1px solid rgba(220, 220, 220, 1);
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
 }
  .msg-box input{
   flex: 1;
    height: 100%;
    padding-left: 24px;
   background: rgba(236, 236, 236, 0.8);
   border-radius: 0px;
   border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
 }
 .msg-box input::-webkit-input-placeholder {
         font-size: 28px;
         color:rgba(102, 102, 102, 1)!important;
    }
    .video-box {
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #F9F9F9;
	}

	video {
		object-fit: fill;
	}
  /* 分享 */
  .invite-card-box {
		width: 100vw;
		height: 100vh;
		/*background: rgba(0,0,0,0.3);*/
		/*background: pink;*/
		position: absolute;
		top: 0;
		left: 0;
		z-index: 100;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(0,0,0,.6);
	}
  .connect-box {
		width: 610px;
		height: 1053px;
		background: rgba(255, 255, 255, 1);
		border-radius: 12px;
		/*display: flex;
		justify-content: center;*/
		/*flex-direction: column;*/
	}

	.img-connect {
		width: 440px;
		height: 551px;
		margin: 65px auto 0;
		position: relative;
		/* background: black; */
	}

	.img-poster {
		height: 100%;
		width: 100%;
		display: block;
		-o-object-fit: cover;
		object-fit: cover;
	}

.img-poster-like{
    width: 440px;
	height: 551px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

	.cha {
		color: white;
		font-size: 34px;
	}

	.close-btn {
		width: 100px;
		height: 80px;
		position: absolute;
		top: 40px;
		right: 0;
		/*background: pink;*/
		z-index: 10;
		display: flex;
		justify-content: center;
		align-items: center;
		background: url('../assets/images/arrow_right.png') no-repeat center center;
		background-size: 55px 55px;
	}

	.circle-box {
		width: 200px;
		height: 200px;
		/*background: darkblue;*/
		position: absolute;
		bottom: 320px;
		right: 5px;
		z-index: 10;
	}

	.circle2 {
		width: 140px;
		height: 140px;
		background: linear-gradient(-90deg, rgba(207, 0, 181, 1), rgba(154, 0, 196, 1));
		border-radius: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -70px;
		margin-left: -70px;
		/*animation: myfirst1 6s linear infinite;*/
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		color: white;
	}

	.tp-p {
		 font-size: 32px;
		font-weight: 800;
		margin-bottom: 17px;
	}

	.ps-p {
		font-size: 24px;
		font-weight: 500;
		transform: scale(0.8);
	}

	.circle1 {
		width: 160px;
		height: 160px;
		border-radius: 50%;
		background: rgba(154, 0, 196, 0.4);
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -80px;
		margin-left: -80px;
		animation: myfirst 2s infinite
	}

	@keyframes myfirst {
		0% {
			transform: scale(1.1, 1.1);
			opacity: 0.7;
		}
		50% {
			transform: scale(0.8, 0.8);
			opacity: 1;
		}
		100% {
			transform: scale(1.1, 1.1);
			opacity: 0.7;
		}
	}




	.videoCoverImg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.videoCoverImg img {
		height: 100%;
		width: 100%;
		display: block;
		object-fit: cover;
	}
		input::-webkit-input-placeholder {
      height: 36px;
      line-height :36px;
      color: #FFFEFE;
     }
  	.qr-box {
      width: 181px;
      height: 181px;
      float: left;
	}
	.qr-box img{
		width: 181px;
		height: 181px;
	}
	.QRcode-box {
		width: 440px;
		height: 190px;
		margin: 35px auto 0;
	}

	.qr-box-tip {
		width: 240px;
		height: 181px;
		float: right;
		color: #C5C4C4;
		font-size: 26px;
	}

	.qr-box-tip p {
		text-align: right;
		line-height: 42px;
	}

	.qr-box-tip img {
		width: 220px;
		height: 71px;
		float: right;
		margin-top: 22px;
	}
.footer-tip {
		display: block;
		font-size: 22px;
		font-weight: 400;
		color: rgba(139, 139, 139, 1);
		line-height: 42px;
		margin: 24px auto 0;
		text-align: center;
	}
  .invite-title {
		width: 440px;
		max-height: 84px;
		line-height: 42px;
		margin: 20px auto 0;
		color: #8B8B8B;
		font-size: 26px;
		text-align: justify;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
  .line {
		width: 440px;
		border-top: 1px solid rgba(243, 243, 243, 1);
		margin: 30px auto 0;
	}
  .showSlide {
		animation: showSlideAnimate 0.5s cubic-bezier(0.32, 0.43, 0.45, 0.94) 1 forwards;
	}

	@keyframes showSlideAnimate {
		from {
			transform: translateY(0px);
		}
		to {
			transform: translateY(-1019px);
		}
	}

	.hideSlide {
		animation: hideSlideAnimate 0.5s cubic-bezier(0.47, 0.24, 0.4, 0.97) 1 forwards;
	}

	@keyframes hideSlideAnimate {
		from {
			transform: translateY(-1019px);
		}
		to {
			transform: translateY(0px);
		}
	}
</style>
